<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下划线跟随导航</title>
    <script src="../../jQuery/jquery-1.9.1.min.js"></script>
</head>
<style>
    body{
        margin: 0;
        padding: 0;

    }
    .header,.head{
        width: 100%;
        height: 40px;
        background: #333;
        position: relative;
        box-sizing: border-box;
    }
    .header-nav,.head-nav{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .header-nav li,.head-nav li{
        width: auto;
        float: left;
        list-style: none;
        text-align: center;
        line-height: 40px;
        height: 100%;
    }
    .header-nav li a,.head-nav li a{
        padding:0 10px;
        width: auto;
        color: #fff;
        font-size: 16px;
        text-decoration: none;
    }
    .header-nav li:hover,.selectedNav,.head-nav li:hover,.selected{
        background: #666;
    }
    .bottomLine{
        position:absolute;
        left:0;
        bottom:0;
        height:4px;
        background-color:#fff;
        transition:all .3s ease;
    }
    h4{
        text-align: center;
    }
</style>
<body>
<h4>第一种</h4>
<div class="header">
    <ul class="header-nav">
        <li class="selectedNav"><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">新闻</a></li>
        <li><a href="javascript:;">图片</a></li>
        <li><a href="javascript:;">视频</a></li>
        <li><a href="javascript:;">关于我们</a></li>
        <li><a href="javascript:;">联系我们</a></li>
    </ul>
    <div class="bottomLine"></div>
</div>
<script>
    $(".header").hover(function() {}, function() {
        $(".header .bottomLine").css("width", parseFloat($(".header .selectedNav").eq(0).width()) + "px");
        $(".header .bottomLine").css("left", parseFloat($(".header .selectedNav").eq(0)[0].offsetLeft) + "px");
    });
    $(".header .header-nav li").hover(function() {
        $(".header .bottomLine").css("width", parseFloat($(this).width() ) + "px");
        $(".header .bottomLine").css("left", parseFloat($(this)[0].offsetLeft) + "px");
    });
    $(".header .header-nav li").on("click", function() {
        $(".header .header-nav li").removeClass("selectedNav");
        $(this).addClass("selectedNav");
        $(".header .bottomLine").css("width", parseFloat($(this).width()) + "px");
        $(".header .bottomLine").css("left", parseFloat($(this)[0].offsetLeft) + "px");
    })
</script>
<h4>第二种</h4>
<div class="head">
    <ul class="head-nav">
        <li class="selected"><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">新闻</a></li>
        <li><a href="javascript:;">图片</a></li>
        <li><a href="javascript:;">视频</a></li>
        <li><a href="javascript:;">关于我们</a></li>
        <li><a href="javascript:;">联系我们</a></li>
    </ul>
    <div class="bottomLine"></div>
</div>
<script>
    $(".head .head-nav li").hover(function() {
        $(".head .bottomLine").css("width", parseFloat($(this).width() ) + "px");
        $(".head .bottomLine").css("left", parseFloat($(this)[0].offsetLeft) + "px");
    },function () {
        $(".head .bottomLine").css("width", "0px");
    });

</script>
</body>
</html>